<html>
<head>
<title>
</title>
<link rel="stylesheet" href="style.css">

<style>
#controls {
  width: 5em;
  text-align: center;
}
</style>

<script src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/annual.js"></script>

<script>
var map;
var heatmap;
var heatmapData = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(document.getElementById('controls'));

  for (set in data) {
    heatmapData[set] = [];
    for (vals in data[set]) {
      heatmapData[set].push(new google.maps.LatLng(data[set][vals].coords[0], data[set][vals].coords[1]));
    }
  }

  heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData['1750']
  });
  heatmap.setMap(map);

  document.getElementById('controls').addEventListener('keyup', setYearFromInput, false);
}

function setYearFromInput(event) {
  if (event.keyCode < 48 || event.keyCode > 57) return;
  var value = document.getElementById('controls').textContent.trim();
  if (value.length < 4 || heatmapData[value] === undefined) return;
  setYear(value);
}

function setYear(year) {
  heatmap.setData(heatmapData[year.toString()]);
}
</script>
</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control" contenteditable="true">1750</div>
</body>
</html>
